iT邦幫忙

DAY 22
8

入門AngularJS筆記與前端領域的學習筆記分享系列 第 22

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class

  • 分享至 

  • xImage
  •  

ng-class是什麼?

如果我們要使用angular在html中設定css樣式,我們可以使用ng-class這個指令。

改寫官方範例:

使用ng-model與ng-class綁定css名稱
http://jsbin.com/EtUKEFa/1/edit

http://docs.angularjs.org/api/ng.directive:ngClass
ng-class怎麼用?

介紹兩種情境下,使用ng-class的方法。

1. 針對指定區域,如果true就執行A樣式,false就執行B樣式。

(1) 設定一個變數名稱,用來控制樣式的顯示
範例中,是在controller裡面,建立一個名稱為isActive的變數名稱。

function Ctrl($scope) { 
    $scope.isActive = true;
}

(2) 設定true和false的樣式,範例中設定兩個名稱為active和inactive的樣式

.active{
  color:red;
}
.inactive{
  color:blue;
}

(3) 將ng-class放在欲顯示的標籤中
{true: '樣式名稱1', false: '樣式名稱2}[控制變數]
如果變數isActive是true,執行名稱為style1的樣式。
如果變數isActive是false,則執行稱為style2的樣式。

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">Hello World</p>

參考完整範例:
http://jsbin.com/ulAtAfE/1/edit

2. 針對指定區域,如果x變數等於true就執行A樣式,y變數等於true也可以執行B樣式。

(1) 建立樣式是否顯示的控制變數,範例中建立兩個變數,並將內容預設為true

function Ctrl($scope) { 
    $scope.isActive1 = true;
    $scope.isActive2 = true;
}

(2) 建立樣式,範例中建立style1和style2兩個樣式

.style1{
  text-decoration: line-through;
}
.style2{
  color:blue;
}

(3) 在標籤中加入ng-class指令,並加入{’css名稱1‘:是否顯示,’css名稱2‘:是否顯示} 樣式中間以逗號區隔

<p ng-class="{'style1': isActive1, 'style2': isActive2}">Hello World</p>

參考完整範例:
http://jsbin.com/EsahuMu/1/edit

What angularjs expression syntax is this in ng-class
http://stackoverflow.com/questions/14735257/what-angularjs-expression-syntax-is-this-in-ng-class

細說Angular ng-class,讓controller更純潔
http://whitewolfblog.blog.51cto.com/3973901/1206484

angular ng-class if-else expression
http://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression

ng-class-odd="'odd'" ng-class-even的基本範例
http://jsfiddle.net/api/post/library/pure/

Angular ng-class 製作動畫 DOM 的出現/消失效果
http://deathhell1121.blogspot.tw/2013/10/angular-ng-class-dom.html

http://jsfiddle.net/razh/SSHYK/

改寫範例:
http://jsbin.com/uteheVO/1/edit

來源:h<ttp://abgne.tw/angularjs/angularjs-getting-stared/ngclasseven-ngclassodd.html>

[AngularJS] ng-class 條件判斷
http://adz.visionbundles.com/posts/72633-angularjs-ng-class-condition-judgement

[AngularJS]AngularJS 入門教學 - ngCalss
http://abgne.tw/angularjs/angularjs-getting-stared/ngcalss.html

進階用法

ng-class="{'none':true,'nav-{{$index+1}}':true}"





ng-class="{'class1': someValue == 1, 'class2': someValue == 2, 
'class3': someValue == 3"

參考:

http://stackoverflow.com/questions/18891534/is-there-a-way-for-me-to-set-the-class-of-an-object-using-the-notation-in-angu/18891605#18891605


上一篇
Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
下一篇
Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
系列文
入門AngularJS筆記與前端領域的學習筆記分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言